{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrap Basic Form Elements</h1>
        </div>
        <div class="row">
        	<div class="col-lg-12">
        		<h2>Inline form</h2>
				<form class="form-inline" role="form">
				  <div class="form-group has-success has-feedback">
				    <label class="sr-only">Email address</label>
				    <input type="email" class="form-control" placeholder="Enter email">
				    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">@</div>
				      <input class="form-control" type="email" placeholder="Enter email">
				    </div>
				  </div>
				  <div class="form-group">
				    <label class="sr-only">Password</label>
				    <input type="password" class="form-control" placeholder="Password">
				  </div>
				  <div class="checkbox">
				    <label>
				      <input type="checkbox"> Remember me
				    </label>
				  </div>
				  <button type="submit" class="btn btn-primary">Sign in</button>
				</form>
        	</div>
        </div>
        <hr/>
        <div class="row">
        	<div class="col-lg-6">
        		<h2>Basic example</h2>
        		<form role="form">
        			<div class="form-group">
        				<label>Email address</label>
        				<input type="email" class="form-control" placeholder="Enter email">
        			</div>
					<div class="form-group">
					    <label>Password</label>
					    <input type="password" class="form-control" placeholder="Password">
					</div>
					<div class="form-group">
						<label>Text input</label>
						<input type="text" class="form-control" placeholder="Text input">
					</div>
					<div class="form-group">
						<label>Textarea</label>
						<textarea class="form-control" rows="3"></textarea>
					</div>
					<div class="checkbox">
					    <label>
					      <input type="checkbox"> Check me out
					    </label>
					</div>
					<div class="form-group">
					    <label>File input</label>
					    <input type="file">
					    <p class="help-block">Example block-level help text here.</p>
					    <p class="help-block"><small>Example small block-level help text here.</small></p>
				    </div>
					<div class="form-group">
						<label>Checkboxes</label>	    
						<div class="checkbox">
						  <label>
						    <input type="checkbox" value="">
						    Option one is this and that&mdash;be sure to include why it's great
						  </label>
						</div>
						<div class="checkbox">
						  <label>
						    <input type="checkbox" value="">
						    Option two can be something else and selecting it will deselect option one
						  </label>
						</div>
						<div class="checkbox disabled">
						  <label>
						    <input type="checkbox" value="" disabled>
						    Option three is disabled
						  </label>
						</div>
					</div>
					<div class="form-group">
						<label>Inline Checkboxes</label>	    
						<label class="checkbox-inline">
						  <input type="checkbox" value="option1"> 1
						</label>
						<label class="checkbox-inline">
						  <input type="checkbox" value="option2"> 2
						</label>
						<label class="checkbox-inline">
						  <input type="checkbox" value="option3"> 3
						</label>
					</div>
					<div class="form-group">
						<label>Radio Buttons</label>
						<div class="radio">
						  <label>
						    <input type="radio" name="optionsRadios" value="option1" checked>
						    Option one is this and that&mdash;be sure to include why it's great
						  </label>
						</div>
						<div class="radio">
						  <label>
						    <input type="radio" name="optionsRadios" value="option2">
						    Option two can be something else and selecting it will deselect option one
						  </label>
						</div>
						<div class="radio disabled">
						  <label>
						    <input type="radio" name="optionsRadios" value="option3" disabled>
						    Option three is disabled
						  </label>
						</div>
					</div>
					<div class="form-group">
						<label>Inline Radio Buttons</label>
						<label class="radio-inline">
						  <input type="radio" name="inlineRadioOptions" value="option1"> 1
						</label>
						<label class="radio-inline">
						  <input type="radio" name="inlineRadioOptions" value="option2"> 2
						</label>
						<label class="radio-inline">
						  <input type="radio" name="inlineRadioOptions" value="option3"> 3
						</label>
					</div>
					<div class="form-group">
						<label>Selects</label>				
						<select class="form-control">
						  <option>1</option>
						  <option>2</option>
						  <option>3</option>
						  <option>4</option>
						  <option>5</option>
						</select>
					</div>
					<div class="form-group">
						<label>Multiple Selects</label>
						<select multiple class="form-control">
						  <option>1</option>
						  <option>2</option>
						  <option>3</option>
						  <option>4</option>
						  <option>5</option>
						</select>
					</div>
					<div class="form-group">
						<label>Static control</label>
						<p class="form-control-static">email@example.com</p>
					</div>
					<div class="form-group">
					    <label>Demonstrative focus state</label>
					    <input class="form-control" type="text" placeholder="Demonstrative focus state" >
					</div>
					<div class="form-group">
					    <label>Disabled input</label>
					    <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
					</div>
					<div class="form-group">
						<label>Disabled select menu</label>
					    <select class="form-control" disabled>
					        <option>Disabled select</option>
					    </select>
					</div>
					<div class="form-group">
						<label>Disabled checkbox</label>
						<div class="checkbox disabled">
						    <label>
						        <input type="checkbox" disabled> Can't check this
						    </label>
						</div>
					</div>
					<div class="form-group">
						<label>Readonly input</label>
						<input class="form-control" type="text" value="Readonly input here…" readonly>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
					<button type="reset" class="btn btn-primary">Reset Button</button>
        		</form>
        	</div>
        	<div class="col-lg-6">
        		<h2>Horizontal form</h2>
				<form class="form-horizontal" role="form">
					<div class="form-group">
					    <label class="col-sm-3 control-label">Email address</label>
					    <div class="col-sm-9">
					        <input type="email" class="form-control" placeholder="Enter email">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Password</label>
					    <div class="col-sm-9">
					        <input type="password" class="form-control" placeholder="Password">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Text input</label>
					    <div class="col-sm-9">
					        <input type="text" class="form-control" placeholder="Text input">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Textarea</label>
					    <div class="col-sm-9">
					        <textarea class="form-control" rows="3"></textarea>
					    </div>
					</div>
					<div class="form-group">
					    <div class="col-sm-offset-3 col-sm-9">
					        <div class="checkbox">
					        	<label>
					                <input type="checkbox"> Remember me
					        	</label>
					        </div>
					    </div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">File input</label>
						<div class="col-sm-9">
					    	<input type="file">
					    	<p class="help-block">Example block-level help text here.</p>
					    	<p class="help-block"><small>Example small block-level help text here.</small></p>
						</div>
					</div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Checkboxes</label>
				    	<div class="col-sm-9">
							<div class="checkbox">
								<label>
								    <input type="checkbox" value="option1"> Option one is this and that—be sure to include why it's great
								</label>
							</div>
							<div class="checkbox">	
								<label>
								    <input type="checkbox" value="option2" checked> Option two can be something else and selecting it will deselect option one
								</label>
							</div>
							<div class="checkbox disabled">
								<label>
								    <input type="checkbox" value="option3" disabled> Option three is disabled
								</label>
							</div>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Inline checkboxes</label>
				    	<div class="col-sm-9">
							<label class="checkbox-inline">
							    <input type="checkbox" value="option1"> Laudantium
							</label>
							<label class="checkbox-inline">
							    <input type="checkbox" value="option2"> Ex
							</label>
							<label class="checkbox-inline disabled">
							    <input type="checkbox" value="option3" disabled> Rem
							</label>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Radio Buttons</label>
				    	<div class="col-sm-9">
							<div class="radio">
								<label>
								    <input type="radio" value="option1" name="radio"> Option one is this and that—be sure to include why it's great
								</label>
							</div>
							<div class="radio">	
								<label>
								    <input type="radio" value="option2" name="radio"> Option two can be something else and selecting it will deselect option one
								</label>
							</div>
							<div class="radio disabled">
								<label>
								    <input type="radio" value="option3" name="radio" disabled> Option three is disabled
								</label>
							</div>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Inline Radio Buttons</label>
				    	<div class="col-sm-9">
							<label class="radio-inline">
							  <input type="radio" value="option1" name="inlineRadioOptions"> Et
							</label>
							<label class="radio-inline">
							  <input type="radio" value="option2" name="inlineRadioOptions"> Facilis
							</label>
							<label class="radio-inline disabled">
							  <input type="radio" value="option3" name="inlineRadioOptions" disabled> Rerum
							</label>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Selects</label>
				    	<div class="col-sm-9">
							<select class="form-control">
							  <option>1</option>
							  <option>2</option>
							  <option>3</option>
							  <option>4</option>
							  <option>5</option>
							</select>
				    	</div>
				    </div>
					<div class="form-group">
						<label class="col-sm-3 control-label">Multiple Selects</label>
						<div class="col-sm-9">
							<select multiple class="form-control">
							  <option>1</option>
							  <option>2</option>
							  <option>3</option>
							  <option>4</option>
							  <option>5</option>
							</select>
						</div>
					</div>
					<div class="form-group">
				    	<label class="col-sm-3 control-label">Static control</label>
				    	<div class="col-sm-9">
							<p class="form-control-static">email@example.com</p>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Demonstrative focus state</label>
				    	<div class="col-sm-9">
							<input class="form-control" type="text" placeholder="Demonstrative focus state" >
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Disabled input</label>
				    	<div class="col-sm-9">
							<input class="form-control" type="text" placeholder="Disabled input here..." disabled>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Disabled select menu</label>
				    	<div class="col-sm-9">
							<select class="form-control" disabled>
					        	<option>Disabled select</option>
					    	</select>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Disabled checkbox</label>
				    	<div class="col-sm-9">
							<div class="checkbox disabled">
						    	<label>
						       		<input type="checkbox" disabled> Can't check this
						    	</label>
							</div>
				    	</div>
				    </div>
				    <div class="form-group">
				    	<label class="col-sm-3 control-label">Readonly input</label>
				    	<div class="col-sm-9">
							<input class="form-control" type="text" value="Readonly input here…" readonly>
				    	</div>
				    </div>
					<div class="form-group">
					    <div class="col-sm-offset-3 col-sm-9">
					        <button type="submit" class="btn btn-primary">Sign in</button>
					        <button type="reset" class="btn btn-default">Reset Button</button>
					    </div>
					</div>
				</form>
        	</div>
        </div>
        <hr/>
        <div class="row">
			<div class="col-lg-6">
				<h2>Validation states</h2>
				<form role="form">
					<div class="form-group has-success">
					  <label>Input with success</label>
					  <input type="text" class="form-control">
					</div>
					<div class="form-group has-success">
					  <label class="control-label">Input with success</label>
					  <input type="text" class="form-control">
					  <p class="help-block">Example block-level help text here.</p>
					  <p class="help-block"><small>Example block-level help text here.</small></p>
					</div>
					<div class="form-group has-warning">
					  <label class="control-label">Input with warning</label>
					  <input type="text" class="form-control">
					</div>
					<div class="form-group has-error">
					  <label class="control-label">Input with error</label>
					  <input type="text" class="form-control">
					</div>
					<div class="form-group has-success has-feedback">
					  <label class="control-label">Checkbox</label>
					  <div class="checkbox">
						<label>
						  <input type="checkbox" value="">
						  Option one is this and that&mdash;be sure to include why it's great
						</label>
					  </div>
					  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="form-group has-error has-feedback">
					  <label class="control-label">Radio Buttons</label>
					  <div class="radio">
						  <label>
						    <input type="radio" name="optionsRadios" value="option1" checked>
						    Option one is this and that&mdash;be sure to include why it's great
						  </label>
				      </div>
					  <div class="radio">
						  <label>
						    <input type="radio" name="optionsRadios" value="option2">
						    Option two can be something else and selecting it will deselect option one
						  </label>
					  </div>
					  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					</div>
					<h3>.has-feedback</h3>
					<div class="form-group has-success has-feedback">
					  <label class="control-label">Input with success</label>
					  <input type="text" class="form-control" placeholder="Input with success">
					  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					  <p class="help-block">Example block-level help text here.</p>
					  <p class="help-block"><small>Example block-level help text here.</small></p>
					</div>
					<div class="form-group has-warning has-feedback">
					  <label class="control-label">Input with warning</label>
					  <input type="text" class="form-control" placeholder="Input with warning">
					  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
					  <p class="help-block">Example block-level help text here.</p>
					  <p class="help-block"><small>Example block-level help text here.</small></p>
					</div>
					<div class="form-group has-error has-feedback">
					  <label class="control-label">Input with error</label>
					  <input type="text" class="form-control" placeholder="Input with error">
					  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					  <p class="help-block"><small>Example block-level help text here.</small></p>
					</div>
					<div class="form-group has-error has-feedback">
					  <label class="control-label">Select with error</label>
					  <select class="form-control">
					    <option>1</option>
					    <option>2</option>
					    <option>3</option>
					  </select>
					  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					</div>
					<h2>Height sizing</h2>
					<div class="form-group has-feedback">
					  <label class="control-label">Large label</label>
					  <input type="text" class="form-control input-lg" placeholder="Large...">
					  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
					  <label class="control-label">Default label</label>
					  <input type="text" class="form-control" placeholder="Default...">
					  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
					  <label class="control-label">Small label</label>
					  <input type="text" class="form-control input-sm" placeholder="Small...">
					  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					</div>
					
					<div class="form-group">
					  <label class="control-label">Large label</label>
					  <select class="form-control input-lg">
					  	<option>Large</option>
					  </select>
					</div>
					<div class="form-group">
					  <label class="control-label">Default label</label>
					  <select class="form-control">
					    <option>Default</option>
					  </select>
					</div>
					<div class="form-group">
					  <label class="control-label">Small label</label>
					  <select class="form-control input-sm">
					  	<option>Small</option>
					  </select>
					</div>
					<button type="submit" class="btn btn-primary disabled">Submit</button>
					<button type="reset" class="btn btn-default disabled">Reset Button</button>
				</form>
			</div>
			<div class="col-lg-6">
				<h2>Horizontal validation states</h2>
				<form class="form-horizontal" role="form">
					<div class="form-group has-success">
					    <label class="col-sm-3">Label success</label>
					    <div class="col-sm-9">
					        <input type="text" class="form-control">
					    </div>
					</div>
					<div class="form-group has-success">
					    <label class="col-sm-3 control-label">Label success</label>
					    <div class="col-sm-9">
					        <input type="text" class="form-control">
					  		<p class="help-block">Example block-level help text here.</p>
					  		<p class="help-block"><small>Example block-level help text here.</small></p>
					    </div>
					</div>
					<div class="form-group has-warning">
					    <label class="col-sm-3 control-label">Label warning</label>
					    <div class="col-sm-9">
					    	<input type="text" class="form-control">
					    </div>
					</div>
					<div class="form-group has-error">
					    <label class="col-sm-3 control-label">Label error</label>
					    <div class="col-sm-9">
					  		<input type="text" class="form-control">
					  	</div>
					</div>
					<div class="form-group has-success">
					    <label class="col-sm-3 control-label">Checkbox</label>
					    <div class="col-sm-9">
							<div class="checkbox">
								<label>
								  <input type="checkbox" value="">
								  Option one is this and that&mdash;be sure to include why it's great
								</label>
							</div>
					  	</div>
					</div>
					<div class="form-group has-error">
					    <label class="col-sm-3 control-label">Radio Buttons</label>
					    <div class="col-sm-9">
							<div class="radio">
								  <label>
								    <input type="radio" name="optionsRadios" value="option1" checked>
								    Option one is this and that&mdash;be sure to include why it's great
								  </label>
						    </div>
							<div class="radio">
								  <label>
								    <input type="radio" name="optionsRadios" value="option2">
								    Option two can be something else and selecting it will deselect option one
								  </label>
							</div>
					  	</div>
					</div>
					<H3>.has-feedback</H3>
					<div class="form-group has-success has-feedback">
					    <label class="col-sm-3 control-label">Label success</label>
					    <div class="col-sm-9">
							<input type="text" class="form-control" placeholder="Input with success">
							<span class="glyphicon glyphicon-ok form-control-feedback"></span>
							<p class="help-block"><i class="glyphicon glyphicon-ok"></i> Example block-level help text here.</p>
							<p class="help-block"><small><i class="glyphicon glyphicon-ok"></i> Example block-level help text here.</small></p>
					    </div>
					</div>
					<div class="form-group has-warning has-feedback">
					    <label class="col-sm-3 control-label">Label warning</label>
					    <div class="col-sm-9">
							<input type="text" class="form-control" placeholder="Input with warning">
							<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
							<p class="help-block"><i class="glyphicon glyphicon-warning-sign"></i> Example block-level help text here.</p>
							<p class="help-block"><small><i class="glyphicon glyphicon-warning-sign"></i> Example block-level help text here.</small></p>
					    </div>
					</div>
					<div class="form-group has-error has-feedback">
					    <label class="col-sm-3 control-label">Label error</label>
					    <div class="col-sm-9">
							<input type="text" class="form-control" placeholder="Input with error">
							<span class="glyphicon glyphicon-remove form-control-feedback"></span>
							<p class="help-block"><i class="glyphicon glyphicon-remove"></i> Example block-level help text here.</p>
							<p class="help-block"><small><i class="glyphicon glyphicon-remove"></i> Example block-level help text here.</small></p>
					    </div>
					</div>
					<div class="form-group has-error">
					    <label class="col-sm-3 control-label">Label error</label>
					    <div class="col-sm-9">
						  <select class="form-control">
						    <option>1</option>
						    <option>2</option>
						    <option>3</option>
						  </select>
					    </div>
					</div>
					<h2>Height sizing</h2>
					<div class="form-group has-feedback">
					    <h4 class="col-sm-3 control-label">Large label</h4>
					    <div class="col-sm-9">
						  <input type="text" class="form-control input-lg" placeholder="Large...">
					      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
					    </div>
					</div>
					<div class="form-group has-feedback">
					    <label class="col-sm-3 control-label">Default label</label>
					    <div class="col-sm-9">
						  <input type="text" class="form-control" placeholder="Default...">
						  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
					    </div>
					</div>
					<div class="form-group has-feedback">
					    <label class="col-sm-3 control-label"><small>Small label</small></label>
					    <div class="col-sm-9">
						  <input type="text" class="form-control input-sm" placeholder="Small...">
						  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
					    </div>
					</div>
					<div class="form-group">
					    <h4 class="col-sm-3 control-label">Large label</h4>
					    <div class="col-sm-9">
						  <select class="form-control input-lg">
					  	    <option>Large</option>
					      </select>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Default label</label>
					    <div class="col-sm-9">
						  <select class="form-control">
						    <option>Default</option>
						  </select>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label"><small>Small label</small></label>
					    <div class="col-sm-9">
						  <select class="form-control input-sm">
						  	<option>Small</option>
						  </select>
					    </div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-3 col-sm-9">
					        <button type="submit" class="btn btn-primary disabled">Sign in</button>
					        <button type="reset" class="btn btn-default disabled">Reset Button</button>
						</div>
					</div>
					

					
					
				</form>
			</div>
        
        </div>
    </div> <!-- /container -->
{% endblock %}